<template>
	<view class="campaign" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar title="运动" backgroundColor="#fff"></nav-bar>
		<view class="m-container">
			<view class="top-card">
				<view class="top_view">
					<view class="date_h">
						<u-image
							width="48rpx"
							height="48rpx"
							:showMenuByLongpress="false"
							@click="$u.throttle(dayReduceTap, 1000)"
							src="http://oss.antaimedical.com/images/pro/2025/02/67b53d20e4b0d615350f313dEKrtfsElllvJ87b7d6428720bc342605b9c886760068.png"
							:lazy-load="true"
						></u-image>
						<view class="date_m" @click="showCalendar_ = true">
							<text>{{ currentSearchTime }}</text>
						</view>
						<u-image
							width="48rpx"
							height="48rpx"
							:showMenuByLongpress="false"
							@click="$u.throttle(dayPlusTap, 1000)"
							src="http://oss.antaimedical.com/images/pro/2025/02/67b53d0fe4b0be9d44423447QSYIrP0e4a6H34c2497b89a3ddf79dbd7258097e400e.png"
							:lazy-load="true"
						></u-image>
					</view>
					<view class="tabs">
						<view
							@click="changeWeightTab(item.type)"
							class="tab"
							:class="{ current: currentType == item.type }"
							v-for="(item, index) in tabs"
							:key="index"
						>
							{{ item.text }}
						</view>
					</view>
				</view>
				<view class="charts">
					<myCharts :option="sportOption"></myCharts>
				</view>
				<view class="kj-box">
					<view class="kj-item">
						<view class="text">有氧消耗(KJ)</view>
						<view class="num" style="color: #02a7f0">{{
							sportData.aerobiacsComsume || '--'
						}}</view>
					</view>
					<view class="kj-item">
						<view class="text">无氧消耗(KJ)</view>
						<view class="num" style="color: #1f2434">{{
							sportData.anaerobicComsume || '--'
						}}</view>
					</view>
					<view class="kj-item">
						<view class="text">运动消耗(KJ)</view>
						<view class="num" style="color: #23c89e">{{
							sportData.kcal || '--'
						}}</view>
					</view>

					<view class="kj-item">
						<view class="text">心率(次/min)</view>
						<view class="num" style="color: #ff672b">{{
							sportData.currentHeartRateAvg || '--'
						}}</view>
					</view>
				</view>
			</view>

			<view class="data_l">
				<view class="kcalNum">
					<view class="kcalNum-l">
						<u-image
							width="48rpx"
							height="48rpx"
							:showMenuByLongpress="false"
							src="http://oss.antaimedical.com/images/pro/2025/02/67b6deb3e4b0be9d44423449yPazMDXzfQ4e8627669772d7531467dccea65c613020.png"
							:lazy-load="true"
						></u-image>
						<text class="text">运动</text>
					</view>
					<view class="kcalNum-r"
						>{{ (kcalSum && kcalSum.toFixed(2)) || '--' }}KJ</view
					>
				</view>
				<view class="not-data" v-if="!dataList.length">
					<u-image
						width="64rpx"
						height="64rpx"
						:showMenuByLongpress="false"
						src="http://oss.antaimedical.com/images/pro/2024/10/6710752de4b0be9d444233abnKYJ3ootRy8d8a7a304c425bfff0f3db570f80c63377.png"
						:lazy-load="true"
					></u-image>
					<view class="text"> 暂无运动记录 </view>
				</view>
				<template v-else>
					<view class="sport-box">
						<view
							class="item"
							v-for="(item, index) in dataList"
							:key="index"
							@click="goDetails(item)"
						>
							<!-- <u-image
                                width="72rpx"
                                height="72rpx"
                                :showMenuByLongpress="false"
                                :src="item.icon"
                                :lazy-load="true"
                            ></u-image> -->
							<view class="info">
								<view class="i_t">
									{{ item.sportProject }}
								</view>
								<view class="i-b">
									<!-- <view class="n-d">
                                        {{ item.kcal }}
                                    </view> -->
									<view class="unit">
										用时{{ item.durationTime }}:00
									</view>
								</view>
							</view>
							<view class="i_r">
								{{ item.kcal }}
								<u-icon name="arrow-right" size="12"></u-icon>
							</view>
						</view>
						<view class="more-btn" @click="handleMore">
							查看更多记录<u-icon
								name="arrow-right"
								size="12"
								color="#5A63FC"
							></u-icon>
						</view>
					</view>
				</template>
			</view>
			<!-- <view class="add-btn" @click="goAdd">
				<u-icon name="plus" size="28" color="#fff" bold></u-icon>
			</view> -->
		</view>
		<my-calendar
			:monthNum="36"
			:defaultDate="defaultDate"
			:maxDate="maxDate"
			@confirm="selectDate_"
			:minDate="minDate"
			:show="showCalendar_"
			color="#545DDE"
			closeOnClickOverlay
			@close="showCalendar_ = false"
		></my-calendar>
		<u-popup
			:show="popupShow"
			:round="10"
			mode="bottom"
			@close="popupShow = false"
		>
			<view class="popup-con">
				<view class="popup-header">
					<view class="title">总运动记录</view>
					<u-icon
						@click="popupShow = false"
						name="close"
						size="15"
						color="#1F2434"
						bold
					></u-icon>
				</view>
				<view class="card-list">
					<u-list height="400">
						<u-list-item v-for="(item,index) in sportRecord" :key="item.date">
							<view class="popup-card">
								<view class="card-header">
									{{ item.date }}
								</view>
								<view class="card-item" v-for="(item2,index2) in item.data" :key="index2" @click="goDetails(item2)">
									<view class="item-l">
										跑步<text>用时{{item2.durationTime}}:00</text>
									</view>
									<view class="item-r"
										>{{item2.kcal}}KJ
										<u-icon
											name="arrow-right"
											size="12"
										></u-icon>
									</view>
								</view>
							</view>
						</u-list-item>
				
					</u-list>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	findSportComparison,
	findSportDataByDay,
	findAllSportRecord,
	findSportHistogramDay
} from '@/api/index.js'
import myCalendar from '@/components/myCalendar/myCalendar.vue'
import myCharts from '@/components/charts/myCharts.vue'
import { getItemColor, getWeekDate } from '@/utils/utils.js'
const dayjs = require('@/utils/dayjs.min.js')
export default {
	components: {
		myCalendar,
		myCharts
	},
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			defaultDate: [],
			maxDate: undefined,
			minDate: undefined,
			currentSearchTime: undefined, // 当前查询的时间
			showCalendar_: false, // 日历控件显示
			dataList: [], // 某一天数据
			kcalSum: '',
			currentWIndex: 0,
			popupShow: false,
			sportData: {},
			currentType: 1,
            sportRecord:[],
			sportOption: {
				showChart: true,
				tooltip: {
					trigger: 'axis',
					// showContent: false,
					backgroundColor: '#1F2434',
					showDelay: 0,
					textStyle: {
						color: '#fff',
						fontSize: '14'
					},
                    padding: [3, 10],
                    formatter: `{b}\n{c}`,
					position: ['50%', '0%']
				},
				grid: {
					left: 0,
					right: 0,
					bottom: 0,
					top: '70',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['有氧运动', '无氧运动', '运动消耗'],
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: false,
							lineStyle: {
								width: 1,
								color: '#E6EBF5',
								type: 'dashed'
							}
						},
						axisLine: {
							//Y轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},
						min: 0, // Y轴刻度
						max: 1000, // Y轴刻度
						interval: 500, // Y轴刻度
						axisLabel: {
							//Y轴刻度线字体样式
							margin: 4,
							formatter: '{value}KJ',
							fontSize: 12,
							color: '#999999'
						},
						verticalAlign: 'middle'
					}
				],
				series: [
					{
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value + ' ml'
							}
						},
						barWidth: '10',
						barGap: '0',
						itemStyle: {
							color: function (params) {
								// 使用函数动态设置颜色
								let colorList = [
									'#23C89E',
									'#02A7F0',
									'#1F2434'
								]
								return colorList[params.dataIndex]
							}
						},
						data: []
					},
					{
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value + ' ml'
							}
						},
						barWidth: '10',
						barGap: '0',
						itemStyle: {
							color: '#C7C8CC'
						},
						data: []
					}
				]
			},
			tabs: [
				{
					type: 1,
					text: '日'
				},
				{
					type: 2,
					text: '周'
				},
				{
					type: 3,
					text: '月'
				}
			]
		}
	},
	onLoad() {
		this.maxDate = dayjs().format('YYYY-MM-DD')
		this.minDate = dayjs(
			dayjs(this.maxDate).subtract(2, 'year').format('YYYY-MM-DD')
		).format('YYYY-MM-DD')
		this.currentSearchTime = dayjs().format('YYYY/MM/DD')
		this.defaultDate[0] = this.maxDate
	},
	onShow() {
		this.fetchDayData()
	},
	methods: {
		//更多记录
		handleMore() {
			this.popupShow = true
            this.findAllSportRecord()
		},

		changeWeightTab(type) {
			this.currentType = type
			if (type == '1') {
				this.currentSearchTime = dayjs(this.maxDate).format(
					'YYYY/MM/DD'
				)
				this.fetchDayData()
			} else if (type == '2') {
				this.currentSearchTime = getWeekDate(this.maxDate)
				this.defaultDate[0] = this.maxDate
				this.fetchDayData()
			} else if (type == '3') {
				this.currentSearchTime = dayjs().format('YYYY/MM')
				this.defaultDate[0] = this.maxDate
				this.fetchDayData()
			}
		},
        findAllSportRecord(){
            let params = {
                userId:this.userId
            }
            findAllSportRecord(params).then((res)=>{
                this.sportRecord = res.data.map((item)=>{
                    return {
                        data:item.data.map((item2)=>{
                            return {
                                ...item2,
                                id:item2.sportId
                            }
                        }),
                        date: dayjs(item.sportDay).format('YYYY年MM月DD')
                    }
                })
            }).catch((err)=>{
                
            })
        },
        findSportDataByDay() {
			let params = {
				userId: this.userId,
				time: dayjs(this.defaultDate[0]).format('YYYY-MM-DD') ,
				page: 1,
				size: 100
			}
            findSportDataByDay(params).then((res)=>{
                this.dataList = res.data.sportDate
				this.kcalSum = res.data.kcalSum
            })
		},
		async fetchDayData() {
            this.findSportDataByDay()
			let obj = {
				1: 'D', //日
				2: 'W', //周
				3: 'M' //月
			}
			let params = {
				dateTime: this.defaultDate[0],
				dateType: obj[this.currentType] || 'D',
				userId: this.userId
			}
			findSportHistogramDay(params).then((res) => {
				const {
					aerobiacsComsume,
					anaerobicComsume,
					kcal,
					recommendKcal,
					recommendAerobiacsComsume,
					recommendAnaerobicComsume
				} = res.data
				this.sportData = res.data
				let data1 = [aerobiacsComsume, anaerobicComsume, kcal]
				let data2 = [
					recommendAerobiacsComsume,
					recommendAnaerobicComsume,
					recommendKcal,
				]
				if (res.data.currentHeartRateAvg) {
					this.sportOption.showChart = false
					this.sportOption.series[0].data = data1
					this.sportOption.series[1].data = data2
				}else{
					this.sportOption.showChart = true
                    this.sportOption.series[0].data = []
					this.sportOption.series[1].data = []
                }
			})
		},

		// 上一个选项
		dayReduceTap() {
			let min = dayjs(this.minDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					// 比对前一天是否是最小天数的前一天
					this.currentSearchTime = pre
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = getWeekDate(pre)
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'month')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = dayjs(pre).format('YYYY/MM')
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 下一个选项
		dayPlusTap() {
			let max = dayjs(this.maxDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					// 比对后一天是否是最大天数的后一天
					this.currentSearchTime = next
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = getWeekDate(next)
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'month')
				).format('YYYY/MM')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = dayjs(next).format('YYYY/MM')
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 最大可选某天控件
		selectDate_(e) {
			this.defaultDate[0] = e[0]
			if (this.currentType == 1) {
				// 单个日期
				this.currentSearchTime = e[0].replaceAll('-', '/')
			} else if (this.currentType == 2) {
				this.currentSearchTime = getWeekDate(e[0])
			} else if (this.currentType == 3) {
				this.currentSearchTime = dayjs(e[0]).format('YYYY/MM')
			}
			this.fetchDayData()
			this.showCalendar_ = false
		},

		goAdd() {
			uni.navigateTo({
				url: `/pagesA/health/device/info/campaign/add?type=add&day=${this.currentSearchTime.replaceAll(
					'/',
					'-'
				)}`
			})
		},
		goDetails(info) {
			uni.navigateTo({
				url: `/pagesA/health/device/info/campaign/update?info=${JSON.stringify(
					info
				)}`
			})
		},
		goRecord() {
			uni.navigateTo({
				url: '/pagesA/health/campaign/record/index'
			})
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: #f3f4f7 !important;
	min-height: 100vh;

	.u-popup__content {
		border-top-left-radius: 128rpx;
	}

	.u-popup__content__close {
		top: 48rpx !important;
		right: 48rpx !important;

		.u-icon__icon {
			font-size: 28rpx !important;
		}
	}
}
</style>
<style lang="scss" scoped>
.campaign {
	padding: 0 0 48rpx;
	.m-container {
		.top-card {
			background-color: #fff;
			padding-bottom: 36rpx;
			margin-bottom: 20rpx;
			.charts {
				margin: 0 30rpx;
                margin-top: 10rpx;
				height: 460rpx;
			}
			.kj-box {
				width: 696rpx;
				height: 134rpx;
				margin: 54rpx auto 0;
				background: #f3f4f7;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.kj-item {
					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #5a667e;
						text-align: left;
					}
					.num {
						font-weight: 500;
						font-size: 32rpx;
						margin-top: 6rpx;
						text-align: left;
					}
				}
			}
		}
		.tabs {
			width: 100%;
			height: 66rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			background: #f3f4f7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.tab {
				width: 33.3%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 38rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-right: 2rpx solid #d0d0d0;
				&:last-child {
					border-right: 0;
				}
			}
			.current {
				font-weight: 600;
				font-size: 26rpx;
				color: #1f2434;
			}
		}
		.add-btn {
			position: fixed;
			bottom: 126rpx;
			right: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			width: 96rpx;
			height: 96rpx;
			background: #545dde;
		}
		.top_view {
			margin: 0 46rpx;

			.date_h {
				padding: 48rpx 0 32rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.date_m {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(31, 36, 52, 0.5);
					text-align: center;
                    background-color: transparent;
				}

				.next_p,
				.pre_p {
					background-color: #545dde;
				}

				.iconfont {
					font-size: 18rpx;
					color: #fff;
				}
			}
		}

		.swiper-container {
			height: 172rpx;
		}

		.data_l {
			background: #ffffff;
			.not-data {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
                margin-top: 20rpx;
				.text {
					margin: 32rpx 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.sport-box {
				padding: 0 26rpx;
			}
			.item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 0;
				border-bottom: 2rpx solid #f4f4f4;
				&:last-child {
					border-radius: 0;
				}
				.info {
					flex: 1;
					padding-left: 14rpx;
					display: flex;
					align-items: center;
					color: #666666;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #1f2434;
					text-align: left;
					.unit {
						margin-left: 20rpx;
					}
				}
				.i_r {
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(31, 36, 52, 0.5);
				}

				.level {
					font-size: 28rpx;
					color: #545dde;
				}
			}
			.more-btn {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #5a63fc;
				text-align: left;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 24rpx 0;
			}
		}

		.none {
			width: auto;
			height: 124rpx;
			margin: 0 48rpx;
			background: #ffffff;
			border-radius: 32rpx;
			line-height: 124rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
		}
		.tooltip {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;

			.t-l {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;

				.mean_txt {
					font-size: 20rpx;
					color: #333333;
				}

				.mean {
					padding: 8rpx 0 32rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #545dde;
					font-family: PingFangSC-Medium, PingFang SC;
				}

				.level {
					display: flex;
					align-items: center;

					.item {
						display: flex;
						align-items: center;
						font-size: 20rpx;
						color: #333333;
						margin-right: 24rpx;

						.dot {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							margin-left: 8rpx;
						}
					}
				}
			}
		}
		.kcalNum {
			border-bottom: 2rpx solid #f4f4f4;
			color: #666666;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 26rpx 30rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #1f2434;
			.kcalNum-l {
				display: flex;
				align-items: center;
				font-weight: 400;
			}
			.kcalNum-r {
				font-weight: 500;
			}
			.text {
				margin-left: 10rpx;
			}
		}
	}
	.popup-con {
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 30rpx;
			border-bottom: 2rpx solid #f4f4f4;
			font-weight: 600;
			font-size: 28rpx;
			color: #1f2434;
		}
		.card-list {
			width: 100%;
		}
		.popup-card {
			font-family: PingFang SC, PingFang SC;
			font-size: 26rpx;
			padding: 0 26rpx;
			margin-bottom: 26rpx;
			.card-header {
				padding: 26rpx 0;
				font-weight: 500;
				color: #1f2434;
				text-align: left;
			}
			.card-item {
				padding: 32rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #f4f4f4;
				.item-l {
					font-weight: 400;
					font-size: 26rpx;
					color: #1f2434;
					text {
						margin-left: 10rpx;
					}
				}
				.item-r {
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					color: rgba(31, 36, 52, 0.5);
				}
			}
		}
	}
}
</style>
